<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import dayjs from 'dayjs'; 

const tableData = ref([]);
const dialogVisible = ref(false);
const merchantDetail = ref(null);

const formatDateTime = (dateString) => {
    if (!dateString) return '无'; // 处理空值
    return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss'); // 格式化为 "2023-05-20 14:30:00"
};
onMounted(() => {
    axios.get('http://localhost:8080/admin/selectAll').then(res => {
        tableData.value = res.data.data;
    });
});

const handleClick = async (row) => {
    try {
        const response = await axios.get(`http://localhost:8080/admin/selectMerchantById?id=${row.id}`);
        merchantDetail.value = response.data.data[0]; // 确保获取的是对象而不是数组
        dialogVisible.value = true; // 确保在数据获取成功后显示弹窗
        console.log("弹窗应该显示，数据:", merchantDetail.value); // 调试用
    } catch (error) {
        console.error('获取商家详情失败:', error);
    }
};
</script>
<template>
    <el-table :data="tableData" style="width: 100%">
        <!-- 表格列定义保持不变 -->
        <el-table-column prop="id" label="编号" width="225px" />
        <el-table-column prop="username" label="账户名" width="225px" />
        <el-table-column prop="merchantName" label="店铺名" width="225px" />
        <el-table-column prop="applyTime" label="提交时间" width="225px">
            <template #default="scope">
                {{ formatDateTime(scope.row.applyTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="isExamine" label="审核状态" width="225px">
            <template #default="scope">
                <el-tag :type="scope.row.isExamine === 1 ? 'success' : 'danger'">
                    {{ scope.row.isExamine === 1 ? '已通过' : '未通过' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="225px">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                    详情
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog
        v-model="dialogVisible"
        title="商家详情"
        width="50%"
    >
        <div v-if="merchantDetail">
            <p><strong>编号:</strong> {{ merchantDetail.id }}</p>
            <p><strong>账户名:</strong> {{ merchantDetail.username }}</p>
            <p><strong>用户头像:</strong>
                <img 
                :src="`http://localhost:8080/img/${merchantDetail.userTouxiang}.jpg`"
                style="max-width: 100px; max-height: 100px;"
                alt="用户头像"></p>
            <p><strong>手机号:</strong> {{ merchantDetail.phone }}</p>
            <p><strong>店铺名:</strong> {{ merchantDetail.merchantName }}</p>
            <p><strong>店铺地址:</strong> {{ merchantDetail.position }}</p>
            <p><strong>店铺头像:</strong> {{ merchantDetail.touxiang }}</p>
            <p><strong>店铺背景图:</strong> {{ merchantDetail.bg }}</p>
            <p><strong>店铺简介:</strong> {{ merchantDetail.merchantIntroduction }}</p>
            <p><strong>提交时间:</strong> {{ merchantDetail.applyTime }}</p>
            <p><strong>是否通过审核:</strong> 
                <el-tag :type="merchantDetail.isExamine === 1 ? 'success' : 'danger'">
                    {{ merchantDetail.isExamine === 1 ? '已通过' : '未通过' }}
                </el-tag>
            </p>
        </div>
    </el-dialog>
</template>